<template>
  <div>
    <div><h1 style="color: #0a0a80"></h1></div>
    <span>
      <div id="c1"></div>
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="输入需要查询的人员信息">
            <el-input
              v-model="formInline.name"
              placeholder="输入名字"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchMessage()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="admMain">
        <el-table ref="multipleTable" stripe border :data="admin" fit>
           <af-table-column label="身份：管理员"></af-table-column>
          <af-table-column prop="name" label="姓名"> </af-table-column>
          <af-table-column prop="id" label="学号"> </af-table-column>
          <af-table-column prop="telephone" label="住宅电话"> </af-table-column>
          <af-table-column prop="phone" label="手机号码"> </af-table-column>
          <af-table-column prop="address" label="联系地址"> </af-table-column>
          <af-table-column prop="username" label="用户名"> </af-table-column>
          <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="showAdm(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="admDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
        </el-table>
      </div>
      <div class="stuMain">
        <el-table stripe border :data="student" fit>
           <af-table-column label="身份：学生" ></af-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="id" label="学号"> </el-table-column>
          <el-table-column prop="clazz" label="班级"> </el-table-column>
          <el-table-column prop="room" label="宿舍号"> </el-table-column>
          <el-table-column prop="height" label="身高(cm)"> </el-table-column>
          <el-table-column prop="weight" label="体重(kg)"> </el-table-column>
          <el-table-column prop="mileageTerm1" label="跑步数1(km)">
          </el-table-column>
          <el-table-column prop="mileageTerm2" label="跑步数2(km)">
          </el-table-column>
          <el-table-column prop="mileageTerm3" label="跑步数3(km)">
          </el-table-column>
          <el-table-column prop="mileageTerm4" label="跑步数4(km)">
          </el-table-column>
          <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="showStu(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="stuDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
        </el-table>
      </div>
      <div class="tchMain">
        <el-table stripe border :data="teacher" fit>
          <af-table-column label="身份：老师"></af-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="id" label="工号"> </el-table-column>
          <el-table-column prop="class" label="任教班级"> </el-table-column>
          <el-table-column prop="room" label="办公室"> </el-table-column>
          <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="showTea(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="teaDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
        </el-table>
      </div>
      <el-dialog title="编辑学生" :visible.sync="dialogVisible" width="30%">
      <div>
        <el-tag>学生姓名</el-tag>
        <el-input
          size="small"
          v-model="formInline.name"
          class="updateStuInput"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="doUpdateStu"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    </span>
  </div>
</template>

<script>
export default {
  name: "adminSearch",

  data() {
    return {
      value: "",
      formInline: {
        name: "",
      },
      dialogVisible: false,
      admin: [],
      student: [],
      teacher: [],
    };
  },
  methods: {
    searchMessage() {
      this.getRequest("/admin/" + this.formInline.name, {}).then((resp) => {
        if (resp) {
          this.admin = resp;
        }
      });
      this.getRequest("/student/" + this.formInline.name, {}).then((resp) => {
        if (resp) {
          this.student = resp;
        }
      });
      this.getRequest("/teacher/" + this.formInline.name, {}).then((resp) => {
        if (resp) {
          this.teacher = resp;
        }
      });
    },
    doUpdateAdm() {
      this.putRequest("/student/", this.formInline).then((resp) => {
        if (resp) {
          this.getRequest();
          this.dialogVisible = false;
        }
      });
    },
    doUpdateStu() {
      this.putRequest("/student/", this.formInline).then((resp) => {
        if (resp) {
          this.getRequest();
          this.dialogVisible = false;
        }
      });
    },
    doUpdateTea() {
      this.putRequest("/student/", this.formInline).then((resp) => {
        if (resp) {
          this.getRequest();
          this.dialogVisible = false;
        }
      });
    },
    showAdm(index, data) {
      this.formInline = data;
      this.dialogVisible = true;
    },
    showStu(index, data) {
      this.formInline = data;
      this.dialogVisible = true;
    },
    showTea(index, data) {
      this.formInline = data;
      this.dialogVisible = true;
    },
    admDelete(index, data) {
      this.$confirm(
        "此操作将永久删除[" + data.name + "]管理员, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteRequest("/admin/" + data.id).then((resp) => {
            if (resp) {
              this.getRequest();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    stuDelete(index, data) {
      this.$confirm(
        "此操作将永久删除[" + data.name + "]学生, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteRequest("/student/" + data.id).then((resp) => {
            if (resp) {
              this.getRequest();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    teaDelete(index, data) {
      this.$confirm(
        "此操作将永久删除[" + data.name + "]老师, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteRequest("/teacher/" + data.id).then((resp) => {
            if (resp) {
              this.getRequest();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  computed: {
    getHeigth() {
      return this.$store.state.app.getHeigth;
    },
  },
  mounted() {},
};
</script>

<style scoped></style>
